<script setup lang="ts">
import { ElTable, ElTableColumn, ElDialog, ElButton, ElForm, ElFormItem, ElInput, ElInputNumber, ElMessage } from 'element-plus';
// import UserList from "@/components/user/UserList.vue";
import tableData from '@/utils/data';

console.log('tableData', tableData.list.value.length, tableData.list.value);

// 搜索
const search = () => {
  const listStatement = tableData.sqlite.selectStatement(tableData.searchForm.name);
  console.log('listStatement', listStatement.length, listStatement);
  tableData.list.value = listStatement.length > 0 ? listStatement : [];
  tableData.count.value = listStatement.length;
}
// 点击添加按钮
const addForm = () => {
  tableData.dialogVisible.value = true;
  tableData.dialogTitle.value = "添加";
}
const submitItem = () => {
  let msg = '';
  if (tableData.formData.id > 0) {
    // 更新数据
    const updateStatement = tableData.sqlite.updateStatement(
      tableData.formData.id,
      tableData.formData.name,
      tableData.formData.age,
    );
    tableData.sqlite.executeStatement(updateStatement);
    msg = '更新成功';
  } else {
    // 新增数据
    tableData.formData.id = null;
    tableData.sqlite.insertStatement(
      tableData.formData.name,
      tableData.formData.age,
    );
    msg = '添加成功';
  }
  handleDialogClose();
  ElMessage(msg);
  search(); // 刷新列表
}
const editForm = (row) => {
  tableData.formData.id = row.id;
  tableData.formData.name = row.name;
  tableData.formData.age = row.age;
  tableData.dialogVisible.value = true;
  tableData.dialogTitle.value = "编辑";
}
// 删除数据
const handleDelete = (id) => {
  const deleteStatement = tableData.sqlite.deleteStatement(id);
  search();
  ElMessage('删除成功');
}
// 弹窗关闭
const handleDialogClose = () => {
  tableData.formData.name = '';
  tableData.formData.age = 0;
  tableData.dialogVisible.value = false;
  tableData.dialogTitle.value = '';
}

</script>

<template>
  <div class="container">
    <!-- // 搜索 -->
    <div class="search-box">
      <el-form ref="searchForm" :inline="true">
        <el-form-item label="">
          <el-input placeholder="请输入搜索内容" v-model="tableData.searchForm.name" />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="success" @click="addForm">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- // 列表 -->
    <div class="list">
      <div v-show="tableData.list.value.length > 0">
        <el-table :data="tableData.list.value" style="width: 100%" stripe>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button type="primary" @click="editForm(scope.row)">编辑</el-button>
              <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- // 表单弹窗 -->
    <div class="form-dialog">
      <el-dialog v-model="tableData.dialogVisible.value" :title="tableData.dialogTitle.value" width="50%" @close="handleDialogClose">
        <el-form>
          <el-form-item label="姓名">
            <el-input v-model="tableData.formData.name" />
          </el-form-item>

          <el-form-item label="年龄">
            <el-input-number v-model="tableData.formData.age" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleDialogClose">取消</el-button>
            <el-button type="primary" @click="submitItem">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- // 统计 -->
    <div class="count">总共 {{ tableData.count.value }} 条数据</div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
}

.search-box {
  width: 100%;
  margin-bottom: 20px;
}

.list {
  width: 100%;
  max-width: 1200px;
  margin-bottom: 20px;
}

.count {
  width: 100%;
  text-align: right;
}
</style>